<template>
  <div class="pfull cockpit">
    <elm-page-tb style="width:calc(100% - 1px);height: calc(100% - 1px)" v-loading="is_loading">
      <template #top>
        <el-date-picker v-model="this_year" type="year" value-format="yyyy" placeholder="选择年份" size="mini" style="width: 250px;" clearable></el-date-picker>
        <right>
          <el-button-group>
            <el-button icon="el-icon-search" size="mini" @click="getList()">查询</el-button>
          </el-button-group>
        </right>
      </template>
      <div style="height: 60%;width: 100%">
        <el-table :data="tableData" border style="width: 100%" stripe max-height="100%">
          <el-table-column prop="name" label="财务指标" align="center"></el-table-column>
          <el-table-column prop="m1" label="1月" align="center">
            <template v-slot="scope">
              {{ scope.row.m1=='-' || !scope.row.m1? "" : handleUnit(scope.row.m1, scope.row.unit) }}
              <span v-if="scope.row.m0 && scope.row.m1">
            <el-icon v-if="scope.row.m0 > scope.row.m1" name="bottom" style="color: red"></el-icon>
            <el-icon v-if="scope.row.m0 < scope.row.m1" name="top" style="color: limegreen"></el-icon>
          </span>
            </template>
          </el-table-column>
          <el-table-column prop="m2" label="2月" align="center">
            <template v-slot="scope">
              {{ scope.row.m2=='-' || !scope.row.m2? "" : handleUnit(scope.row.m2, scope.row.unit) }}
              <span v-if="scope.row.m1 && scope.row.m2">
            <el-icon v-if="scope.row.m1 > scope.row.m2" name="bottom" style="color: red"></el-icon>
            <el-icon v-if="scope.row.m1 < scope.row.m2" name="top" style="color: limegreen"></el-icon>
          </span>
            </template>
          </el-table-column>
          <el-table-column prop="m3" label="3月" align="center">
            <template v-slot="scope">
              {{ scope.row.m3=='-' || !scope.row.m3? "" : handleUnit(scope.row.m3, scope.row.unit) }}
              <span v-if="scope.row.m2 && scope.row.m3">
            <el-icon v-if="scope.row.m2 > scope.row.m3" name="bottom" style="color: red"></el-icon>
            <el-icon v-if="scope.row.m2 < scope.row.m3" name="top" style="color: limegreen"></el-icon>
          </span>
            </template>
          </el-table-column>
          <el-table-column prop="m4" label="4月" align="center">
            <template v-slot="scope">
              {{ scope.row.m4=='-' || !scope.row.m4? "" : handleUnit(scope.row.m4, scope.row.unit) }}
              <span v-if="scope.row.m3 && scope.row.m4">
            <el-icon v-if="scope.row.m3 > scope.row.m4" name="bottom" style="color: red"></el-icon>
            <el-icon v-if="scope.row.m3 < scope.row.m4" name="top" style="color: limegreen"></el-icon>
          </span>
            </template>
          </el-table-column>
          <el-table-column prop="m5" label="5月" align="center">
            <template v-slot="scope">
              {{ scope.row.m5=='-' || !scope.row.m5? "" : handleUnit(scope.row.m5, scope.row.unit) }}
              <span v-if="scope.row.m4 && scope.row.m5">
            <el-icon v-if="scope.row.m4 > scope.row.m5" name="bottom" style="color: red"></el-icon>
            <el-icon v-if="scope.row.m4 < scope.row.m5" name="top" style="color: limegreen"></el-icon>
          </span>
            </template>
          </el-table-column>
          <el-table-column prop="m6" label="6月" align="center">
            <template v-slot="scope">
              {{ scope.row.m6=='-' || !scope.row.m6? "" : handleUnit(scope.row.m6, scope.row.unit) }}
              <span v-if="scope.row.m5 && scope.row.m6">
            <el-icon v-if="scope.row.m5 > scope.row.m6" name="bottom" style="color: red"></el-icon>
            <el-icon v-if="scope.row.m5 < scope.row.m6" name="top" style="color: limegreen"></el-icon>
          </span>
            </template>
          </el-table-column>
          <el-table-column prop="m7" label="7月" align="center">
            <template v-slot="scope">
              {{ scope.row.m7=='-' || !scope.row.m7? "" : handleUnit(scope.row.m7, scope.row.unit) }}
              <span v-if="scope.row.m6 && scope.row.m7">
            <el-icon v-if="scope.row.m6 > scope.row.m7" name="bottom" style="color: red"></el-icon>
            <el-icon v-if="scope.row.m6 < scope.row.m7" name="top" style="color: limegreen"></el-icon>
          </span>
            </template>
          </el-table-column>
          <el-table-column prop="m8" label="8月" align="center">
            <template v-slot="scope">
              {{ scope.row.m8=='-' || !scope.row.m8? "" : handleUnit(scope.row.m8, scope.row.unit) }}
              <span v-if="scope.row.m7 && scope.row.m8">
            <el-icon v-if="scope.row.m7 > scope.row.m8" name="bottom" style="color: red"></el-icon>
            <el-icon v-if="scope.row.m7 < scope.row.m8" name="top" style="color: limegreen"></el-icon>
          </span>
            </template>
          </el-table-column>
          <el-table-column prop="m9" label="9月" align="center">
            <template v-slot="scope">
              {{ scope.row.m9=='-' || !scope.row.m9? "" : handleUnit(scope.row.m9, scope.row.unit) }}
              <span v-if="scope.row.m8 && scope.row.m9">
            <el-icon v-if="scope.row.m8 > scope.row.m9" name="bottom" style="color: red"></el-icon>
            <el-icon v-if="scope.row.m8 < scope.row.m9" name="top" style="color: limegreen"></el-icon>
          </span>
            </template>
          </el-table-column>
          <el-table-column prop="m10" label="10月" align="center">
            <template v-slot="scope">
              {{ scope.row.m10=='-' || !scope.row.m10? "" : handleUnit(scope.row.m10, scope.row.unit) }}
              <span v-if="scope.row.m9 && scope.row.m10">
            <el-icon v-if="scope.row.m9 > scope.row.m10" name="bottom" style="color: red"></el-icon>
            <el-icon v-if="scope.row.m9 < scope.row.m10" name="top" style="color: limegreen"></el-icon>
          </span>
            </template>
          </el-table-column>
          <el-table-column prop="m11" label="11月" align="center">
            <template v-slot="scope">
              {{ scope.row.m11=='-' || !scope.row.m11? "" : handleUnit(scope.row.m11, scope.row.unit) }}
              <span v-if="scope.row.m10 && scope.row.m11">
            <el-icon v-if="scope.row.m10 > scope.row.m11" name="bottom" style="color: red"></el-icon>
            <el-icon v-if="scope.row.m10 < scope.row.m11" name="top" style="color: limegreen"></el-icon>
          </span>
            </template>
          </el-table-column>
          <el-table-column prop="m12" label="12月" align="center">
            <template v-slot="scope">
              {{ scope.row.m12=='-' || !scope.row.m12? "" : handleUnit(scope.row.m12, scope.row.unit) }}
              <span v-if="scope.row.m11 && scope.row.m12">
            <el-icon v-if="scope.row.m11 > scope.row.m12" name="bottom" style="color: red"></el-icon>
            <el-icon v-if="scope.row.m11 < scope.row.m12" name="top" style="color: limegreen"></el-icon>
          </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="height:40%;width: 100%">
        <div style="height: 280px;width: 100%" ref="trendChart"></div>
      </div>
    </elm-page-tb>
  </div>
</template>
<script>
export default {
  extends: elmVueBase,
  data() {
    return {
      this_year: '',
      is_loading: false,
      tableData: [],
      trendOption: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['总收入','毛利','净利润','营业成本','销售费用','管理费用','财务费用'],
          top: 10
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisPointer: {
              type: 'shadow'
            },
            axisLabel: {
              interval: 0,
              rotate: 0
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '金额',
            //min: 0,
            axisLabel: {
              formatter: '{value} 万元'
            }
          },
        ],
        series: [
          {
            name: '总收入',
            type: 'line',
            smooth: false,
            data: [],
            connectNulls: true,
            itemStyle: {
              color: '#5B8FF9', // 蓝色
            }
          },
          {
            name: '毛利',
            type: 'line',
            smooth: false,
            data: [],
            connectNulls: true,
            itemStyle: {
              color: '#5AD8A6', // 绿色
            }
          },
          {
            name: '净利润',
            type: 'line',
            smooth: false,
            data: [],
            connectNulls: true,
            itemStyle: {
              color: '#F6BD16', // 黄色
            }
          },
          {
            name: '营业成本',
            type: 'line',
            smooth: false,
            data: [],
            connectNulls: true,
            itemStyle: {
              color: '#E8684A', // 红色
            }
          },
          {
            name: '销售费用',
            type: 'line',
            smooth: false,
            data: [],
            connectNulls: true,
            itemStyle: {
              color: '#6DC8EC', // 浅蓝
            }
          },
          {
            name: '管理费用',
            type: 'line',
            smooth: false,
            data: [],
            connectNulls: true,
            itemStyle: {
              color: '#9270CA', // 紫色
            }
          },
          {
            name: '财务费用',
            type: 'line',
            smooth: false,
            data: [],
            connectNulls: true,
            itemStyle: {
              color: '#FF9D4D', // 橙色
            }
          },
        ]
      },
    }
  },
  async created() {
    this.this_year = elm.parseTime(new Date(), '{y}');
  },
  mounted(){
    this.initTrendChart();
    this.$nextTick(() => {
      this.getList();
    })
  },
  methods: {
    async getTotal(){
      let Dd = await elm.post("/business/analysis/cockpit/month/SelectDdTotalData",{now_year:this.this_year});
      let Ht = await elm.post("/business/analysis/cockpit/month/SelectHtTotalData",{now_year:this.this_year});
      let Pj = await elm.post("/business/analysis/cockpit/month/SelectPjTotalData",{now_year:this.this_year});
      let res = [...Dd,...Ht,...Pj];
      let Total = {name:'总收入',unit:'万元'};
      for(let i=0;i<res.length;i++){
        let j="m"+res[i].month.toString();
        if(Total[j])
          Total[j]+=res[i].total_amount;
        else
          Total[j]=res[i].total_amount;
        Total[j]=Number(Total[j].toFixed(6));
      }
      return Total;
    },
    async getGross(Total){
      let Pj = await elm.post("/business/analysis/cockpit/month/SelectPjCostSum",{now_year:this.this_year});
      let Out = await elm.post("/business/analysis/cockpit/month/SelectOutsourceCostSum",{now_year:this.this_year});
      let res = [...Pj,...Out];
      let Gross ={...Total,name:'毛利'};
      for(let i=0;i<res.length;i++){
        let j="m"+res[i].month.toString();
        if(Gross[j])
          Gross[j]-=res[i].total_cost;
        else
          Gross[j]=-res[i].total_cost;
        Gross[j]=Number(Gross[j].toFixed(6));
      }
      return Gross;
    },
    async getNet(Gross){
      let Labor = await elm.post("/business/analysis/cockpit/month/SelectLaborCostSum",{now_year:this.this_year});
      let Net = {...Gross,name:'净利润'};
      for(let i=0;i<Labor.length;i++){
        let j="m"+Labor[i].month.toString();
        if(Net[j])
          Net[j]-=Labor[i].total_cost;
        else
          Net[j]=-Labor[i].total_cost;
        Net[j]=Number(Net[j].toFixed(6));
      }
      return Net;
    },
    async getCost(){
      let res0 = await elm.post("/business/analysis/cockpit/month/SelectLaborCost",{now_year:this.this_year});
      let res1 = await elm.post("/business/analysis/cockpit/month/SelectPjCost",{now_year:this.this_year});
      let res2 = await elm.post("/business/analysis/cockpit/month/SelectOutsourceCost",{now_year:this.this_year});
      let res = [...res0,...res1,...res2];
      let Cost = [{name:'营业成本',unit:'万元'},{name:'销售费用',unit:'万元'},{name:'管理费用',unit:'万元'},{name:'财务费用',unit:'万元'}];
      let table=['营业成本','销售费用','管理费用','财务费用'];
      for(let i=0;i<res.length;i++){
        if(!res[i].cost_type)continue;
        let j=table.indexOf(res[i].cost_type);
        let k="m"+res[i].month.toString();
        if(Cost[j][k])
          Cost[j][k]+=res[i].total_cost;
        else
          Cost[j][k]=res[i].total_cost;
        Cost[j][k]=Number(Cost[j][k].toFixed(6));
      }
      return Cost;
    },
    async getList() {
      this.is_loading=true;
      this.tableData=[];
      let Total= await this.getTotal();
      this.tableData.push(Total);
      let Gross= await this.getGross(Total);
      this.tableData.push(Gross);
      let Net=await this.getNet(Gross);
      this.tableData.push(Net);
      let Cost=await this.getCost();
      this.tableData.push(...Cost);
      this.GetData();
      this.is_loading=false;
    },
    handleUnit(value, unit) {
      return value + ' ' + unit;
    },
    GetData() {
      for(let item in this.tableData){
        let res=[];
        for(let i=1;i<=12;i++){
          res[i-1]=this.tableData[item]["m"+i.toString()];
        }
        this.trendOption.series[item].data=res;
      }
      this.initTrendChart();
    },
    initTrendChart() {
      const chart = this.$echarts.init(this.$refs.trendChart);
      chart.setOption(this.trendOption);
      // 监听窗口大小变化，重绘图表
      window.addEventListener('resize', () => {
        chart.resize();
      })
    }
  }
}
</script>
<style>
.cockpit {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  overflow: auto;
}
</style>